<template>
	<view class="wallet" style="height:100%">
		<Hearder :name="ptbname" :ptbname="ptbname"></Hearder>
		<u-transition :show="show">
			<view class="money" v-if="JSON.stringify(infodata) !='{}'">
					<view class="money_l">
						<image src="/static/images/996.png"></image>
						<view>
							<text>{{ptbname}}</text>
							<text>{{infodata.account}}</text>
						</view>
					</view>
				<view class="money_r" @click="toPage('Withdrawal?type=1&ptbname='+ptbnames)" v-if="infodata.withdrawal.open_amount==1">提现</view>
			</view>
			<view class="comtit">
				<view class="comtit_m bgbottom">
					<view class="comtit_mt">充值金额</view>
					<view class="comtit_mb" @click="choosetype(-1,0)">
						<text>￥</text>
						<input type="text" :placeholder="'请输入充值金额('+infodata.recharge_proportion+')'" v-model="account" placeholder-style="color:#eee" />
					</view>
				</view>
				<view class="paymoney bgbottom">
					<view class="title">快捷充值</view>
					<view class="invest clearfix">
						<view class="every" :class="choose==index?'recharge_act':''" @click="choosetype(index,item.recharge_id)"
							v-for="(item,index) in list" :key="index">
							<view><text>￥</text><text>{{item.price}}</text></view>
							<view>赠送:{{item.face_value}}币</view>
						</view>
					</view>
				</view>
			</view>
		</u-transition>
		<Methodpay ref="paymeth" :account="account" :type="1" :recharge_id="recharge_id"></Methodpay>
		<view class="btn" @tap="$u.throttle(paymoney, 1000)">充值</view>
	</view>
</template>

<script>
	import Methodpay from '@/pages/common/methodpay.vue'
	export default {
		data() {
			return {
				info: [],
				account: '',
				infodata: {},
				list: [],
				choose: 0,
				recharge_id:'',
				ptbname:'',
				ptbnames:'',
				show:true,
			}
		},
		onLoad(options) {
			if(options.ptbname){
				this.ptbname = options.ptbname+'充值'
				this.ptbnames = options.ptbname
			}
			this.request('/member/getMemberDetails').then(res => {
				if (res.data.code == 1) {
					this.infodata = res.data.data
				}
			});
			this.request('/member/getProfitList').then(res => {
				if (res.data.code == 1) {
					this.list = res.data.data
					if(res.data.data.length){
						this.recharge_id = res.data.data[0].recharge_id
					}
				} 
			});
		},
		methods: {
			paymoney() {
				this.$refs.paymeth.payment()
			},
			choosetype(index, recharge_id) {
				this.choose = index
				this.recharge_id = recharge_id
				if (recharge_id != 0) {
					this.account = ""
				}
			},
			toPage(a) {
				uni.navigateTo({
					url: a
				})
			},
		},
		components: {
			Methodpay
		},
	}
</script>

<style scoped lang="scss">
	.wallet {
		.btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			margin-top: 30rpx;
			background: $uni-item-color;
			color: #fff;
			font-size: 32rpx;
			width: 92%;
			margin-left: 4%;
		}

		.vipt {
			position: fixed;
			top: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 80rpx 30rpx 20rpx;
			z-index: 9;
			box-sizing: border-box;
			background: #fff;

			text:nth-of-type(1) {
				font-size: 34rpx;
				font-weight: 700;
			}

			text:nth-of-type(2) {
				font-size: 28rpx;
				margin: auto 0;
			}
		}

		.money {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0 40rpx 30rpx;
			background-color: $uni-item-color;
			/* #ifdef APP-PLUS */
			margin-top: 160rpx;

			/* #endif */
			.money_l {
				display: flex;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;

					text:nth-of-type(1) {
						color: #F8F8F8;
						font-size: 24rpx;
						margin-top: -4rpx;
					}

					text:nth-of-type(2) {
						color: #F8F8F8;
						font-size: 36rpx;
						font-weight: 800;
						margin-top: 4rpx;
					}
				}
			}
			.money_r{
				width: 129rpx;
				height: 60rpx;
				background: #fff;
				border-radius: 60rpx 0 0 60rpx;
				color: $uni-item-color;
				font-weight: 800;
				text-align: center;
				line-height: 60rpx;
				box-sizing: border-box;
				padding-left: 6rpx;
			}
		}

		.comtit {
			.comtit_m {
				padding: 0rpx 20rpx 20rpx;

				.comtit_mt {
					font-size: 26rpx;
					padding: 30rpx 0;
					color: #999;
				}

				.comtit_mb {
					display: flex;
					align-items: center;

					text {
						font-size: 60rpx;
						font-weight: 800;
					}

					input {
						flex: 1;
						font-size: 34rpx;
						margin: 4rpx 0 0 20rpx;
						font-weight: 800;
					}
				}
			}

			.paymoney {
				.title {
					font-weight: 800;
					padding: 29rpx 3%;
				}

				.invest {
					margin: 0 3% 10rpx;

					.every {
						float: left;
						width: 224rpx;
						height: 140rpx;
						border: 1rpx solid #eee;
						border-radius: 6rpx;
						text-align: center;
						position: relative;
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						&:nth-of-type(3n){
							margin-right: 0;
						}
						view:nth-of-type(1) {
							text-align: center;
							margin: 24rpx auto 0;

							text:nth-of-type(1) {
								font-size: 20rpx;
								color: $uni-text-color;
								font-weight: 700;
							}

							text:nth-of-type(2) {
								font-size: 40rpx;
								color: $uni-text-color;
								font-weight: 700;
							}
						}

						view:nth-of-type(2) {
							font-size: 20rpx;
							color: #999;
							text-align: center;
							margin-top: 6rpx;
						}
					}

					.recharge_act {
						border: 2rpx solid #FE473A;
						color: #FC281A;

						text {
							color: #FC281A;
						}
					}
				}
			}
		}
	}
</style>
